<template>
  <div class="attend-wrap">
    <div class="search-box">
      <div class="note" @click="openNote">功能说明</div>
      <div class="search-con">
        <input type="text" placeholder="请输入姓名或者工号" class="content" v-model="check" @blur="inputBlur" maxlength="15"/>
        <img src="./search.png" class="icon" onclick="return false"/>
      </div>
      <div class="title" @click="searchAttend()">搜索</div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="attend-con"
    >
      <div class="attend-list" v-for="(item,index) in attendList" :key="index">
        <div class="attend-box">
          <div class="attend-content">
            <span class="name">{{item.userName}}</span><span class="number status">{{item.status>0?"已签到":""}}</span>
          </div>
          <div class="attend-content">
            <span class="name">身份证号:</span><span class="number">{{item.userCardNumber}}</span>
            <div v-if="!item.workNum" class="sign-btn">
              <button type="button" class="off" v-if="item.status>0" @click="openModal(item.id)">取消签到</button>
              <button type="button" class="pass" v-else @click="attendance(item.id)">考勤签到</button>
            </div>
          </div>
          <div class="attend-content" v-if="item.workNum">
            <span class="name">工号:</span><span class="number">{{item.workNum}}</span>
            <button type="button" class="off" v-if="item.status>0" @click="openModal(item.id)">取消签到</button>
            <button type="button" class="pass" v-else @click="attendance(item.id)">考勤签到</button>
          </div>
        </div>
        <div class="line-box" v-if="index != attendList.length-1"></div>
      </div>
    </van-list>

    <!--搜索无结果-->
    <div class="empty-wrap" v-if="attendList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <!--功能说明-->
    <div class="modal-wrap" v-show="rule">
      <div class="modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">员工考勤功能说明</span>
            <img src="./del.png" class="del-icon" @click="close" onclick="return false"/>
          </div>
          <div class="rule-box">
            1.该功能主要用于驻厂老师管理能够提前领工资的员工的日常考勤。
          </div>
          <div class="rule-box">
            2.当驻厂老师确认某一员工上班后，点击“考勤签到”按钮，则该员工签到成功。若驻厂老师操作错误，点击“修改考勤”按钮，则可以取消该员工的考勤签到状态。
          </div>
        </div>
      </div>
    </div>

    <v-dialog v-model="sendVal" content="是否将该员工的考勤状态改成未签到？" cancelText="否" confirmText="是" @confirm="updateAttend"
              @cancel="cancel"></v-dialog>

    <backpage @backPage="backPage"></backpage>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import dialog from "../../components/dialog"
  import backpage from "../../components/backpage"

  export default {
    inject: ['reload'],
    data() {
      return {
        rule: false,
        userSign: "",
        mechanismId: "",
        attendList: [],
        check: "",
        empty: true,
        sendVal: false,
        id: "",
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryAttendList();
            this.timer = null;
          }, 500)
        }
      },
      initVanList() {//初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.attendList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      searchAttend() {//根据条件查找
        this.initVanList();
      },
      queryAttendList() {//查询考勤签到列表
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/get_user_sign_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/get_user_sign_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data.length > 0 && resultObj.data != null) {
              this.attendList = this.attendList.concat(resultObj.data);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.attendList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      attendance(id) {//考勤签到
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/set_user_sign?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/set_user_sign?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&mechanismUserIn=" + id + "&status=" + 1 + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {//签到考勤失败
              this.reload();
              this.$vux.toast.text("签到考勤失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal(id) {//提示语句
        this.id = id;
        this.sendVal = true;
      },
      openNote() {
        this.rule = true;
      },
      close() {
        this.rule = false;
      },
      updateAttend() {//修改考勤
        this.sendVal = false;
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/set_user_sign?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/set_user_sign?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&mechanismUserIn=" + this.id + "&status=" + 2 + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {//签到考勤失败
              this.$vux.toast.text("修改考勤失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancel() {//否
        this.sendVal = false;
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      }
    },
    components: {
      "v-dialog": dialog,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  .attend-wrap
    width: 100%
    height: auto
    .search-box
      position: fixed
      top: 0
      z-index: 99
      display: flex
      align-items: center
      width: 100%
      height: 1.333333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      background: #FFF
      .note
        display: flex
        align-items: center
        text-align: center
        margin-left: 0.373333rem
        margin-right: 0.28rem
        width: 0.986666rem
        height: 0.946666rem
        border: 1px solid rgba(60, 175, 255, 1)
        border-radius: 0.08rem
        font-size: 0.333333rem
        font-weight: 500
        color: rgba(60, 175, 255, 1)
      .search-con
        position: relative
        display: flex
        align-items: center
        width: 69.86666%
        height: 0.946666rem
        background: rgba(255, 255, 255, 1)
        border: 1px solid rgba(126, 126, 126, 1)
        border-radius: 0.466666rem
        .content
          display: flex
          align-items: center
          height: 0.6rem
          line-height: 0.6rem
          margin-left: 0.733333rem
          font-size: 0.386666rem
          color: rgba(187, 187, 187, 1)
          border: none
          outline: none
        .icon
          position: absolute
          width: 0.373333rem
          height: 0.373333rem
          left: 0.24rem
          top: 0
          bottom: 0
          margin: auto
      .title
        margin-left: auto;
        margin-right: 0.346666rem;
        font-size: 0.386666rem;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);

    .attend-con
      position: absolute
      top: 1.333333rem
      width: 100%
      .attend-box
        display: flex
        justify-content: center
        flex-direction: column
        width: 100%
        height: auto
        .attend-content
          display: flex
          align-items: center
          margin-left: 0.426666rem
          margin-bottom: 0.2rem
          margin-top: 0.2rem
          .name
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .number
            padding-left: 0.4rem
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .status
            margin-right: 0.293333rem
            margin-left: auto
            color: rgba(255, 96, 96, 1)
          .sign-btn
            display: flex
            margin-left: auto
          .pass
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.84rem
            height: 0.693333rem
            line-height: 0.693333rem
            background: rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.346666rem
            color: rgba(255, 255, 255, 1)
            border: 1px solid rgba(60, 175, 255, 1)
          .off
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.84rem
            height: 0.693333rem
            line-height: 0.693333rem
            border-radius: 0.346666rem
            font-size: 0.346666rem
            color: rgba(60, 175, 255, 1)
            border: 0.027rem solid rgba(60, 175, 255, 1)
            background: #FFF
          .refuse
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.84rem
            height: 0.693333rem
            line-height: 0.693333rem
            border: 1px solid rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.386666rem
            color: rgba(60, 175, 255, 1)
            background: rgba(255, 255, 255, 1)
      .line-box
        width: 100%
        height: 0.133333rem
        background: #F2F2F2
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 1.333333rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186666rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333333rem
          border-bottom: 1px solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            font-weight: 500
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute;
            width: 0.386666rem;
            height: 0.386666rem;
            right: 0.373333rem;

        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373333rem
          font-size: 0.413333rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626666rem
          margin-bottom: 0.8rem
</style>
